<template>
    <div class="container">
        <mt-header title="订单详情">
            <router-link to="/order" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="body">
            <div class="img">
                <img :src="baseUrl + data.cover" alt="">
            </div>
        </div>
        <div class="nav">
            <div class="title" >
                {{ data.title }}
            </div>
            <div class="con" style="text-align: start;margin-left:10px;margin-bottom:10px">
                用户名：
                {{ data.contacts }}
            </div>
            <div class="ru">
                入住人列表(入住人数{{ data.livingCapacity }})
                <div class="per" v-for="(item, index) in data.personList" :key="index">
                    <div>
                        联系人姓名： {{ item.personName }}
                        联系人电话： {{ item.tel }}
                    </div>
                </div>
            </div>
            <div class="other">
                <div class="id" style="margin-bottom: 10px;">
                    订单号：{{ data.orderNo }}
                </div>
                <div class="time" style="margin-bottom: 10px;">
                    创建时间 ：{{ data.createTime }}
                </div>
                <div class="message" style="margin-bottom: 10px;">
                    备注： {{ data.message }}
                </div>
            </div>

        </div>
        <div class="bottom">
            付款信息：
            <div class="detail">
                <div class="payTime" style="margin-bottom: 10px;">
                    支付时间：{{ data.payTime }}
                </div>
                <div class="payAmount" style="margin-bottom: 10px;">
                    支付金额 ：{{ data.payAmount }}
                </div>
                <div class="payType" style="margin-bottom: 10px;">
                    支付方式： {{ data.payType }}
                </div>
                <div class="status" style="margin-bottom: 10px;padding-bottom: 10px;">
                    订单当前状态 ：{{ data.status }}
                </div>
                <div v-if="isShow" class="pay">
                <mt-button class="pay1" type="primary" @click="pay">立即支付</mt-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            id: '',
            data: {},
            baseUrl: this.getBaseUrl(),
            isShow:'',
            commentData:[]
        }
    },
    methods: {
        getId() {
            this.id = this.$route.query.id
            this.getDetail(this.id)
        },
        getDetail(id) {
            this.$axios({
                url: this.$api.order + id,
                method: 'get',
                Headers: { Authorization: 'Bearer' + this.$store.state.token }
            }).then(res => {
                this.data = res.data
                if (this.data.status = "交易成功") {
                    this.isShow = false
                }
                // console.log(this.data);
            })
        },
        pay(){
            //写个屁支付 拿命住
        }
    },
    mounted() {
        this.getId()
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.img {
    width: 95%;
    height: auto;
    margin: 0 auto;
    margin-top: 10px;

    img {
        width: 100%;
        height: 200px;
        border-radius: 10px;
    }
}

.nav {
    margin: 0 auto;
    background-color: #fff;
    width: 95%;
    margin-top: 5px;
    border-radius: 10px;

    .title {
        font-size: larger;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .ru {
        margin-left: 10px;
        text-align: start;

        .per {
            margin-left: 20px;
        }
    }
    .other{
        text-align: start;
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.bottom{
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    .detail{
        text-align: start;
        margin-left: 10px;
    }
}

.pay{
    width: 100px;
    margin: 0 auto;
    padding-bottom: 10px;
    .pay1{
        width: 100%;
    }
}

</style>